/* 框架内置样式，业务开发请移步 src/style/common.less，方便版本升级 */
.lg-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  >.v-ellipsis {
    display: none;
    width: 300px;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #000;
    color: #ccc;
  }
  &:hover {
    >.v-ellipsis {
      display: block;
    }
  }
}

/* 文本省略 */
.lg-ellipsis-n{
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.lg-ellipsis-more(@line) {
  .lg-ellipsis-n();
  -webkit-line-clamp: @line;
}
.lg-ellipsis-1 {
  .lg-ellipsis-more(1);
}
.lg-ellipsis-2 {
  .lg-ellipsis-more(2);
}
.lg-ellipsis-3 {
  .lg-ellipsis-more(3);
}
.lg-ellipsis-4 {
  .lg-ellipsis-more(4);
}
.lg-ellipsis-5 {
  .lg-ellipsis-more(5);
}
.lg-ellipsis-6 {
  .lg-ellipsis-more(6);
}
.lg-ellipsis-7 {
  .lg-ellipsis-more(7);
}
.lg-ellipsis-8 {
  .lg-ellipsis-more(8);
}
.lg-ellipsis-9 {
  .lg-ellipsis-more(9);
}
.lg-ellipsis-10 {
  .lg-ellipsis-more(10);
}

.lg-link {
  color: var(--app-color-primary);
  cursor: pointer;
  &:hover {
    color: var(--app-color-primary-5);
  }
}

.lg-flex-line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.lg-flex-row {
  display: flex;
  flex-direction: row;
}
.lg-flex-col {
  display: flex;
  flex-direction: column;
}
.lg-flex-first {
  display: flex;
  &>:first-child {
    flex: 1;
  }
}
.lg-flex-last {
  display: flex;
  &>:last-child {
    flex: 1;
  }
}

/* 居中 */
.lg-center-text {
  text-align: center;
}
.lg-center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lg-center-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 响应式栅格布局 */
.lg-grid,
.lg-grid-v {
  /* 每行最大格数 */
  --grid: 1;
  /* 某个栅格占用格数 */
  --grid-item: 1;
  /* 垂直间距 */
  --grid-space-v: var(--app-space-vertical, 16px);
  /* 水平间距 */
  --grid-space-h: var(--app-space-horizontal, 16px);
  /* 衍生变量 */
  --grid-item-width: calc(100% / var(--grid));
  --grid-space-v-half: calc(var(--grid-space-v) / 2);
  --grid-space-h-half: calc(var(--grid-space-h) / 2);
  display: flex;
  flex-wrap: wrap;
  margin: calc(0px - var(--grid-space-v-half)) calc(0px - var(--grid-space-h-half));
  >:nth-child(n) {
    min-width: var(--grid-item-width);
    width: calc(var(--grid-item-width) * var(--grid-item));
    max-width: 100%;
    padding: var(--grid-space-v-half) var(--grid-space-h-half);
    transition: width;
  }
  .lg-grid-row {
    --grid-item: var(--grid);
  }
}
.lg-show-s6,
.lg-show-s5,
.lg-show-s4,
.lg-show-s3,
.lg-show-s2,
.lg-show-s1 {
  display: none;
}

@media only screen and (min-width: 1888px) {
  .lg-hide-s6 {
    display: none;
  }
  .lg-show-s6 {
    display: unset;
  }
  .lg-grid {
    --grid-item-width: calc(100% / var(--grid-s6, var(--grid)));
    --grid-space-v-half: calc(var(--grid-space-v-s6, var(--grid-space-v)) / 2);
    --grid-space-h-half: calc(var(--grid-space-h-s6, var(--grid-space-h)) / 2);
    >:nth-child(n) {
      width: calc(var(--grid-item-width) * var(--grid-item-s6, var(--grid-item)));
    }
  }
}
@media only screen and (min-width: 1468px) and (max-width: 1887px){
  .lg-hide-s5 {
    display: none;
  }
  .lg-show-s5 {
    display: unset;
  }
  .lg-grid {
    --grid-item-width: calc(100% / var(--grid-s5, var(--grid)));
    --grid-space-v-half: calc(var(--grid-space-v-s5, var(--grid-space-v)) / 2);
    --grid-space-h-half: calc(var(--grid-space-h-s5, var(--grid-space-h)) / 2);
    >:nth-child(n) {
      width: calc(var(--grid-item-width) * var(--grid-item-s5, var(--grid-item)));
    }
  }
}
@media only screen and (min-width: 1168px) and (max-width: 1467px){
  .lg-hide-s4 {
    display: none;
  }
  .lg-show-s4 {
    display: unset;
  }
  .lg-grid {
    --grid-item-width: calc(100% / var(--grid-s4, var(--grid)));
    --grid-space-v-half: calc(var(--grid-space-v-s4, var(--grid-space-v)) / 2);
    --grid-space-h-half: calc(var(--grid-space-h-s4, var(--grid-space-h)) / 2);
    >:nth-child(n) {
      width: calc(var(--grid-item-width) * var(--grid-item-s4, var(--grid-item)));
    }
  }
}
@media only screen and (min-width: 948px) and (max-width: 1167px) {
  .lg-hide-s3 {
    display: none;
  }
  .lg-show-s3 {
    display: unset;
  }
  .lg-grid {
    --grid-item-width: calc(100% / var(--grid-s3, var(--grid)));
    --grid-space-v-half: calc(var(--grid-space-v-s3, var(--grid-space-v)) / 2);
    --grid-space-h-half: calc(var(--grid-space-h-s3, var(--grid-space-h)) / 2);
    >:nth-child(n) {
      width: calc(var(--grid-item-width) * var(--grid-item-s3, var(--grid-item)));
    }
  }
}
@media only screen and (min-width: 768px) and (max-width: 947px) {
  .lg-hide-s2 {
    display: none;
  }
  .lg-show-s2 {
    display: unset;
  }
  .lg-grid {
    --grid-item-width: calc(100% / var(--grid-s2, var(--grid)));
    --grid-space-v-half: calc(var(--grid-space-v-s2, var(--grid-space-v)) / 2);
    --grid-space-h-half: calc(var(--grid-space-h-s2, var(--grid-space-h)) / 2);
    >:nth-child(n) {
      width: calc(var(--grid-item-width) * var(--grid-item-s2, var(--grid-item)));
    }
  }
}
@media only screen and (max-width: 768px) {
  .lg-hide-s1 {
    display: none;
  }
  .lg-show-s1 {
    display: unset;
  }
  .lg-grid {
    --grid-item-width: calc(100% / var(--grid-s1, var(--grid)));
    --grid-space-v-half: calc(var(--grid-space-v-s1, var(--grid-space-v)) / 2);
    --grid-space-h-half: calc(var(--grid-space-h-s1, var(--grid-space-h)) / 2);
    >:nth-child(n) {
      width: calc(var(--grid-item-width) * var(--grid-item-s1, var(--grid-item)));
    }
  }
}

.lg-auto-size {
  --padding: 0;
  position: relative;
  >:first-child {
    position: absolute;
    inset: var(--padding);
    overflow: auto;
  }
}

.lg-space {
  > * {
    margin-right: var(--td-comp-margin-s);
    margin-bottom: var(--td-comp-margin-s);
  }
}
.lg-space-h,
.lg-space-l {
  >:not(:first-child) {
    margin-left: var(--td-comp-margin-s);
  }
}
.lg-space-v,
.lg-space-t {
  >:not(:first-child) {
    margin-top: var(--td-comp-margin-s);
  }
}
.lg-space-r {
  >:not(:last-child) {
    margin-right: var(--td-comp-margin-s);
  }
}
.lg-space-b {
  >:not(:last-child) {
    margin-bottom: var(--td-comp-margin-s);
  }
}

button-list{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  >:not(:first-child) {
    margin-left: var(--td-comp-margin-s);
  }
  .lg-btn-list-more {
    cursor: pointer;
  }
}

[hidden='true'],
[hidden='hidden'],
.lg-hidden,
.lg-has-hidden {
  display: none !important;
  pointer-events: none !important;
  -moz-user-select: none !important;
}

[lg-tooltip] {
  position: relative;
  &:hover {
    &:before {
      content: attr(lg-tooltip);
      width: 300px;
      padding: 5px 10px;
      border-radius: 4px;
      background-color: #000;
      color: #ccc;
      position: absolute;
      transition: all .3s;
      top: -13px;
      left: 50%;
      transform: translate(-50%, -100%);
      z-index: 9999;
    }
    &:after {
      content: attr(lg-tooltip);
      overflow: hidden;
      width: 0;
      height: 0;
      color: #000;
      position: absolute;
      transition: all .3s;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      border: 8px solid transparent;
      border-top: 8px solid #000;
    }
  }
  &[lg-position='bottom']:hover {
    &:before {
      top: unset;
      bottom: -13px;
      transform: translate(-50%, 100%);
    }
    &:after {
      top: unset;
      bottom: -13px;
      border-top: unset;
      border-bottom: 8px solid #000;
    }
  }
  &[lg-position='left']:hover {
    &:before {
      left: -13px;
      top: 50%;
      transform: translate(-100%, -50%);
    }
    &:after {
      left: -13px;
      top: 50%;
      transform: translateY(-50%);
      border-top: 8px solid transparent;
      border-left: 8px solid #000;
    }
  }
  &[lg-position='right']:hover {
    &:before {
      left: unset;
      right: -13px;
      top: 50%;
      transform: translate(100%, -50%);
    }
    &:after {
      left: unset;
      right: -13px;
      top: 50%;
      transform: translateY(-50%);
      border-top: 8px solid transparent;
      border-right: 8px solid #000;
    }
  }
}

.lg-drag-trigger{
  cursor: move;
}
.lg-drag-top,
.lg-drag-left,
.lg-drag-bottom,
.lg-drag-right{
  position: absolute;
  z-index: 99;
}
.lg-drag-top,.lg-drag-bottom{
  left: -4px;
  right: -4px;
  height: 8px;
}
.lg-drag-top{
  top: -4px;
}
.lg-drag-bottom{
  bottom: -4px;
}
.lg-drag-left,.lg-drag-right{
  top: -4px;
  bottom: -4px;
  width: 8px;
}
.lg-drag-left{
  left: -4px;
}
.lg-drag-right{
  right: -4px;
}
.lg-resize-tl,
.lg-resize-tr,
.lg-resize-br,
.lg-resize-bl {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 100;
}
.lg-resize-tl {
  top: -2px;
  left: -2px;
  cursor: nw-resize;
}
.lg-resize-tr {
  top: -2px;
  right: -2px;
  cursor: sw-resize;
}
.lg-resize-br {
  bottom: -2px;
  right: -2px;
  cursor: nw-resize;
}
.lg-resize-bl {
  bottom: -2px;
  left: -2px;
  cursor: sw-resize;
}

.lg-table-imgs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -4px -4px;
  .lg-table-img {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    margin-left: 4px;
  }
}

.lg-list {
  --lg-list-pd: var(--app-space-vertical) 0;
  --lg-list-label-w: 8em;
  .lg-list-item {
    display: flex;
    align-items: center;
    padding: var(--lg-list-pd);
  }
  .lg-list-item + .lg-list-item {
    border-top: 1px solid #ddd;
  }
  .lg-list-item.lg-list-text {
    display: block;
    .lg-list-label {
      display: inline-block;
    }
    .lg-list-value {
      display: inline;
    }
  }
  .lg-list-item.lg-list-card {
    display: block;
    .lg-list-label {
      display: block;
    }
    .lg-list-value {
      display: block;
    }
  }
  .lg-list-label {
    color: #888;
    display: inline-block;
    width: var(--lg-list-label-w);
    margin-right: var(--app-space-horizontal);
  }
  .lg-list-value {
    flex: 1;
  }
  &[lg-align=left] {
    .lg-list-label,
    .lg-list-value {
      text-align: left;
    }
  }
  &[lg-align=right] {
    .lg-list-label,
    .lg-list-value {
      text-align: right;
    }
  }
  &[lg-align=center] {
    .lg-list-label,
    .lg-list-value {
      text-align: center;
    }
  }
  &[lg-align=near] {
    .lg-list-label {
      text-align: right;
    }
  }
  &[lg-align=edge] {
    .lg-list-value {
      text-align: right;
    }
  }
}

.lg-tooltip-box {
  max-width: 25%;
  padding: var(--app-space, 6px);
  border-radius: var(--app-border-radius, 3px);
  background: #1e1e1e;
  color: white;
}

[tooltip-position] {}
[tooltip]{
  &>:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
[tooltip]:hover {
  overflow: unset;
  position: relative;
  &:before {
    content: attr(tooltip);
    color: white;
    background: black;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    bottom: calc(100% + 10px);
  }
  &:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -10px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid black;
  }

  &[tooltip-position=t] {
    &:before {
      bottom: calc(100% + 10px);
    }
    &:after {
      top: -10px;
    }
    &:before,
    &:after {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &[tooltip-position=tr] {
    &:before {
      bottom: calc(100% + 10px);
      left: 0;
    }
    &:after {
      top: -10px;
      left: 16px;
    }
  }
  &[tooltip-position=tl] {
    &:before {
      bottom: calc(100% + 10px);
      right: 0;
    }
    &:after {
      top: -10px;
      right: 16px;
    }
  }

  &[tooltip-position=b],
  &[tooltip-position=br],
  &[tooltip-position=bl] {
    &:after {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid black;
      border-top: unset;
      top: unset;
    }
  }
  &[tooltip-position=b] {
    &:before {
      top: calc(100% + 10px);
    }
    &:after {
      bottom: -10px;
    }
    &:before,
    &:after {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &[tooltip-position=br] {
    &:before {
      top: calc(100% + 10px);
      left: 0;
    }
    &:after {
      bottom: -10px;
      left: 16px;
    }
  }
  &[tooltip-position=bl] {
    &:before {
      top: calc(100% + 10px);
      right: 0;
    }
    &:after {
      bottom: -10px;
      right: 16px;
    }
  }

  &[tooltip-position=l],
  &[tooltip-position=lt],
  &[tooltip-position=lb] {
    &:after {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 10px solid black;
      border-right: unset;
      top: unset;
    }
  }
  &[tooltip-position=l] {
    &:before {
      right: calc(100% + 10px);
      bottom: unset;
    }
    &:after {
      left: -10px;
    }
    &:before,
    &:after {
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &[tooltip-position=lt] {
    &:before {
      top: 0;
      right: calc(100% + 10px);
      bottom: unset;
    }
    &:after {
      left: -10px;
      top: 8px;
    }
  }
  &[tooltip-position=lb] {
    &:before {
      bottom: 0;
      right: calc(100% + 10px);
      top: unset;
      left: unset;
    }
    &:after {
      left: -10px;
      bottom: 8px;
      top: unset;
    }
  }

  &[tooltip-position=r],
  &[tooltip-position=rt],
  &[tooltip-position=rb] {
    &:after {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 10px solid black;
      border-left: unset;
      top: unset;
    }
  }
  &[tooltip-position=r] {
    &:before {
      left: calc(100% + 10px);
      bottom: unset;
    }
    &:after {
      right: -10px;
    }
    &:before,
    &:after {
      top: 50%;
      transform: translateY(-50%);
    }
  }
  &[tooltip-position=rt] {
    &:before {
      top: 0;
      left: calc(100% + 10px);
      bottom: unset;
    }
    &:after {
      right: -10px;
      top: 8px;
    }
  }
  &[tooltip-position=rb] {
    &:before {
      bottom: 0;
      left: calc(100% + 10px);
      top: unset;
      right: unset;
    }
    &:after {
      right: -10px;
      bottom: 8px;
      top: unset;
    }
  }
}

.lg-table-copy-ing {
  user-select: auto;
}
.lg-selected-top {
  border-top: 1px solid var(--copy-table-color, var(--app-color-primary)) !important;
}
.lg-selected-bottom {
  border-bottom: 1px solid var(--copy-table-color, var(--app-color-primary)) !important;
}
.lg-selected-left {
  border-left: 1px solid var(--copy-table-color, var(--app-color-primary)) !important;
}
.lg-selected-right {
  border-right: 1px solid var(--copy-table-color, var(--app-color-primary)) !important;
}
